<template>
	<view class="main">
		<van-toast id="van-toast" />
		<tou_hand1 handtitle='使用帮助'></tou_hand1>
		<view class="show">
			<view :class="logoimg.loshow=='0'?'shand':'shand1'">
				<image :src="logoimg.logo"></image>
			</view>
			<view class="sone">
				<!-- <view class="btap" @click="tapbtn(1)">
					<view class="dbleft">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//h1.png"></image>
						<view class="dbtext">使用流程</view>
					</view>
					<view class="dbright">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jtright.png"></image>
					</view>
				</view> -->
				<view class="btap" @click="tapbtn(2)">
					<view class="dbleft">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//b1.png"></image>
						<view class="dbtext">常见问题</view>
					</view>
					<view class="dbright">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jtright.png"></image>
					</view>
				</view>
				<view class="btap" @click="tapbtn(3)">
					<view class="dbleft">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//b2.png"></image>
						<view class="dbtext">用车常识</view>
					</view>
					<view class="dbright">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jtright.png"></image>
					</view>
				</view>
				<a :href="'tel:'+list.projectPhone">
					<view class="btap">
						<view class="dbleft">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//b3.png"></image>
							<view class="dbtext">电话客服</view>
						</view>
						<view class="dbright" v-if="list.projectPhone">
							<span class="dbphone"><a class="msright"
									style="color: #8DC321;">{{list.projectPhone}}</a></span>
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jtright.png"></image>
						</view>
						<view class="dbright" v-if="!list.projectPhone">
							<span class="dbphone">{{list.projectPhone}}</span>
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jtright.png"></image>
						</view>
					</view>
				</a>

				<view class="btap" @click="wxshowopen">
					<view class="dbleft">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//b4.png"></image>
						<view class="dbtext">微信客服</view>
					</view>
					<view class="dbright">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jtright.png"></image>
					</view>
				</view>
				<!-- <view class="btap" @click="tapbtn(6)">
					<view class="dbleft">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//b5.png"></image>
						<view class="dbtext">故障报修</view>
					</view>
					<view class="dbright">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jtright.png"></image>
					</view>
				</view> -->
				<view class="btap" @click="tapbtn(7)">
					<view class="dbleft">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//b6.png"></image>
						<view class="dbtext">操作指引</view>
					</view>
					<view class="dbright">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jtright.png"></image>
					</view>
				</view>
			</view>

		</view>
		<!-- //微信二维码弹窗 -->
		<van-popup :show="wxshow">
			<view class="tannei1">
				<view class="tnhand">
					<view class="tntxt">客服微信</view>
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//close.png" @click="wxshowclose"></image>
				</view>
				<view class="tnfoot">
					<view class="wxcodeimg">
						<image :src="erimg"></image>
					</view>
					<view class="wxtxt">
						长按可以识别二维码，可以直接加微信客服沟通哦
					</view>
				</view>
			</view>
		</van-popup>

	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand2/tou_hand2.vue'
	import {
		Config
	} from '../../common/Config.js'
	export default {
		components: {
			tou_hand1
		},
		mounted() {

		},

		data() {
			return {
				list: {},
				erimg: '',
				wxshow: false,
				logoimg: ''
			}
		},
		onLoad() {
			this.show();
		},
		onShow() {
			this.logoimg = uni.getStorageSync('wechat_view');
		},
		methods: {
			// 获取使用帮助列表
			show() {

				this.$base.request('/user/infos', 'GET')
					.then(res => {
						if (res.data.code == 200) {
							this.list = res.data.data
							if (this.list.wechatLogo) {
								this.list.wechatLogo = Config.imgapi + this.list.wechatLogo
							}
							if (res.data.data.wechatImg) {
								this.erimg = Config.imgapi + res.data.data.wechatImg
							}
						} else {
							this.$toast.fail(res.data.msg)
							return
						}
					})
					.catch(err => {

					})
			},
			tapbtn(type) {
				if (type == 1 || type == 2 || type == 3) {
					uni.navigateTo({
						url: '../using_help_list/using_help_list?type=' + type
					})
				} else if (type == 4) {

				} else if (type == 7) {
					uni.navigateTo({
						url: '/pages/Operation_guide/Operation_guide'
					});
				} else if (type == 6) {
					uni.navigateTo({
						url: '/pages/trouble_shooting/trouble_shooting'
					});
				}
			},
			//关闭微信二维码弹窗
			wxshowclose() {
				this.wxshow = false
			},
			//打开微信二维码弹窗
			wxshowopen() {
				if (this.erimg) {
					this.wxshow = true
				} else {
					this.$toast.fail('该小区暂未配置微信客服')
					return
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 100vh;
		overflow-x: hidden;
		background-color: #2A3034;

		.show {
			width: 100%;

			.shand {
				width: 230upx;
				height: 104upx;
				margin: 90upx auto;

				image {
					width: 230upx;
					height: 104upx;
				}
			}

			.shand1 {
				width: 230upx;
				height: 230upx;
				margin: 10upx auto;

				image {
					width: 230upx;
					height: 230upx;
				}
			}

			.sone {
				width: 686upx;
				margin: 0 auto;
				background-color: #2A3034;
				padding-top: 23upx;

				.btap {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					padding: 19upx;

					align-items: center;

					.dbleft {
						box-sizing: border-box;
						display: flex;
						align-items: center;

						image {
							width: 30upx;
							height: 30upx;
						}

						.dbtext {
							box-sizing: border-box;
							margin-left: 22upx;
							font-size: 30upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #fff;
						}

					}

					.dbright {
						box-sizing: border-box;
						display: flex;

						.dbphone {
							font-size: 24upx;
							font-family: PingFang SC Heavy, PingFang SC Heavy-Heavy;
							font-weight: 800;
							color: #4b98ed;
							margin-right: 28upx;
						}

						image {
							width: 19upx;
							height: 32upx;
						}

					}
				}
			}

		}

		.tannei1 {
			width: 480upx;
			background-color: #FFFFFF;

			.tnhand {
				width: 100%;
				height: 64upx;
				background-color: #4B98ED;
				align-items: center;

				.tntxt {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #ffffff;
					line-height: 64upx;
					text-align: center;
					position: relative;
				}

				image {
					width: 25upx;
					height: 25upx;
					position: absolute;
					top: 19upx;
					right: 18upx;
				}
			}

			.tnfoot {
				width: 100%;
				margin-top: 24upx;
				margin-bottom: 27upx;

				.tfshang {
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					text-align: center;
					color: #333333;
				}

				.tfshang1 {
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					text-align: center;
					color: #F078CE;
					margin-top: 70upx;
				}

				.tfxia {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					text-align: center;
					color: #333333;
					line-height: 65upx;
				}

				.tfxia1 {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					text-align: center;
					color: #F078CE;
					line-height: 65upx;
				}

				.wxcodeimg {
					width: 260upx;
					height: 260upx;
					margin: 47upx auto;

					image {
						width: 260upx;
						height: 260upx;
					}
				}

				.wxtxt {
					width: 100%;
					box-sizing: border-box;
					padding: 0 45upx;
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					text-align: left;
					color: #333333;
					line-height: 50upx;
				}

			}
		}
	}
</style>